Modularize the color selection of the theme
This commit is contained in:
parent
f51fe0b80a
commit
e4f5ef3a4c
@ -28,9 +28,9 @@ function SocialLink({
|
||||
<li className={clsx(className, 'flex')}>
|
||||
<Link
|
||||
href={href}
|
||||
className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
|
||||
className="group flex text-sm font-medium text-text-800 transition hover:text-accent-500 dark:text-text-200 dark:hover:text-accent-500"
|
||||
>
|
||||
<Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
|
||||
<Icon className="h-6 w-6 flex-none fill-text-500 transition group-hover:fill-accent-500" />
|
||||
<span className="ml-4">{children}</span>
|
||||
</Link>
|
||||
</li>
|
||||
@ -64,16 +64,16 @@ export default function About() {
|
||||
src={portraitImage}
|
||||
alt=""
|
||||
sizes="(min-width: 1024px) 32rem, 20rem"
|
||||
className="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
|
||||
className="aspect-square rotate-3 rounded-2xl bg-text-100 object-cover dark:bg-text-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:order-first lg:row-span-2">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-text-800 dark:text-text-100 sm:text-5xl">
|
||||
I’m dr. Jip J. Dekker, a problem solver using optimization
|
||||
technologies.
|
||||
</h1>
|
||||
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
|
||||
<div className="mt-6 space-y-7 text-base text-text-600 dark:text-text-400">
|
||||
<p>
|
||||
I’m a computer scientist at Monash University specializing in
|
||||
optimization and devoted to developing cutting-edge tools and
|
||||
@ -149,7 +149,7 @@ export default function About() {
|
||||
<SocialLink
|
||||
href="mailto:jip.dekker@monash.edu"
|
||||
icon={MailIcon}
|
||||
className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
|
||||
className="mt-8 border-t border-text-100 pt-8 dark:border-text-700/40"
|
||||
>
|
||||
jip.dekker@monash.edu
|
||||
</SocialLink>
|
||||
|
||||
@ -48,7 +48,7 @@ export default async function ArticlesIndex() {
|
||||
title="Writing on optimization, programming languages."
|
||||
intro="All of my long-form thoughts on programming, leadership, product design, and more, collected in chronological order."
|
||||
>
|
||||
<div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
|
||||
<div className="md:border-l md:border-text-100 md:pl-6 md:dark:border-text-700/40">
|
||||
<div className="flex max-w-3xl flex-col space-y-16">
|
||||
{articles.map((article) => (
|
||||
<Article key={article.slug} article={article} />
|
||||
|
||||
@ -42,7 +42,7 @@ export default function RootLayout({
|
||||
<html lang="en" className="h-full antialiased" suppressHydrationWarning>
|
||||
<body
|
||||
className={clsx(
|
||||
'flex h-full bg-zinc-50 dark:bg-black',
|
||||
'flex h-full bg-text-50 dark:bg-black',
|
||||
atkinson.className,
|
||||
jetbrains.variable,
|
||||
)}
|
||||
|
||||
@ -5,13 +5,13 @@ export default function NotFound() {
|
||||
return (
|
||||
<Container className="flex h-full items-center pt-16 sm:pt-32">
|
||||
<div className="flex flex-col items-center">
|
||||
<p className="text-base font-semibold text-zinc-400 dark:text-zinc-500">
|
||||
<p className="text-base font-semibold text-text-400 dark:text-text-500">
|
||||
404
|
||||
</p>
|
||||
<h1 className="mt-4 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
<h1 className="mt-4 text-4xl font-bold tracking-tight text-text-800 dark:text-text-100 sm:text-5xl">
|
||||
Page not found
|
||||
</h1>
|
||||
<p className="mt-4 text-base text-zinc-600 dark:text-zinc-400">
|
||||
<p className="mt-4 text-base text-text-600 dark:text-text-400">
|
||||
Sorry, we couldn’t find the page you’re looking for.
|
||||
</p>
|
||||
<Button href="/" variant="secondary" className="mt-4">
|
||||
|
||||
@ -47,7 +47,7 @@ function SocialLink({
|
||||
}) {
|
||||
return (
|
||||
<Link className="group -m-1 p-1" {...props}>
|
||||
<Icon className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300" />
|
||||
<Icon className="h-6 w-6 fill-text-500 transition group-hover:fill-text-600 dark:fill-text-400 dark:group-hover:fill-text-300" />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@ -71,21 +71,21 @@ function Role({ role }: { role: Role }) {
|
||||
|
||||
return (
|
||||
<li className="flex gap-4">
|
||||
<div className="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-xl shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
|
||||
<div className="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-xl shadow-md shadow-text-800/5 ring-1 ring-text-900/5 dark:border dark:border-text-700/50 dark:bg-text-800 dark:ring-0">
|
||||
<Image src={role.logo} alt="" className="h-7 w-7" unoptimized />
|
||||
</div>
|
||||
<dl className="flex flex-auto flex-wrap gap-x-2">
|
||||
<dt className="sr-only">Company</dt>
|
||||
<dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||||
<dd className="w-full flex-none text-sm font-medium text-text-900 dark:text-text-100">
|
||||
{role.company}
|
||||
</dd>
|
||||
<dt className="sr-only">Role</dt>
|
||||
<dd className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||
<dd className="text-xs text-text-500 dark:text-text-400">
|
||||
{role.title}
|
||||
</dd>
|
||||
<dt className="sr-only">Date</dt>
|
||||
<dd
|
||||
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500"
|
||||
className="ml-auto text-xs text-text-400 dark:text-text-500"
|
||||
aria-label={`${startLabel} until ${endLabel}`}
|
||||
>
|
||||
<time dateTime={startDate}>{startLabel}</time>{' '}
|
||||
@ -133,8 +133,8 @@ function Resume() {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
|
||||
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
<div className="rounded-2xl border border-text-100 p-6 dark:border-text-700/40">
|
||||
<h2 className="flex text-sm font-semibold text-text-900 dark:text-text-100">
|
||||
<BriefcaseIcon className="h-6 w-6 flex-none" />
|
||||
<span className="ml-3">Career Overview</span>
|
||||
</h2>
|
||||
@ -146,7 +146,7 @@ function Resume() {
|
||||
{/*
|
||||
<Button href="#" variant="secondary" className="group mt-6 w-full">
|
||||
Download CV
|
||||
<ArrowDownIcon className="h-4 w-4 stroke-zinc-400 transition group-active:stroke-zinc-600 dark:group-hover:stroke-zinc-50 dark:group-active:stroke-zinc-50" />
|
||||
<ArrowDownIcon className="h-4 w-4 stroke-text-400 transition group-active:stroke-text-600 dark:group-hover:stroke-text-50 dark:group-active:stroke-text-50" />
|
||||
</Button>
|
||||
*/}
|
||||
</div>
|
||||
@ -163,7 +163,7 @@ function Photos() {
|
||||
<div
|
||||
key={image.src}
|
||||
className={clsx(
|
||||
'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
|
||||
'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-text-100 dark:bg-text-800 sm:w-72 sm:rounded-2xl',
|
||||
rotations[imageIndex % rotations.length],
|
||||
)}
|
||||
>
|
||||
@ -187,10 +187,10 @@ export default async function Home() {
|
||||
<>
|
||||
<Container className="mt-9">
|
||||
<div className="max-w-2xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-text-800 dark:text-text-100 sm:text-5xl">
|
||||
Optimisation Expert & Programming Language Designer
|
||||
</h1>
|
||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||
<p className="mt-6 text-base text-text-600 dark:text-text-400">
|
||||
I’m Jip, a researcher at the OPTIMA ARC research centre and Monash
|
||||
University, where we aim to make complex decisions easier through
|
||||
decision support and data insights. We design state-of-the-art
|
||||
|
||||
@ -69,7 +69,7 @@ export default function Projects() {
|
||||
>
|
||||
{projects.map((project) => (
|
||||
<Card as="li" key={project.name}>
|
||||
<div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-xl bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
|
||||
<div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-xl bg-white shadow-md shadow-text-800/5 ring-1 ring-text-900/5 dark:border dark:border-text-700/50 dark:bg-text-800 dark:ring-0">
|
||||
<Image
|
||||
src={project.logo}
|
||||
alt=""
|
||||
@ -77,11 +77,11 @@ export default function Projects() {
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<h2 className="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
|
||||
<h2 className="mt-6 text-base font-semibold text-text-800 dark:text-text-100">
|
||||
<Card.Link href={project.link.href}>{project.name}</Card.Link>
|
||||
</h2>
|
||||
<Card.Description>{project.description}</Card.Description>
|
||||
<p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-teal-500 dark:text-zinc-200">
|
||||
<p className="relative z-10 mt-6 flex text-sm font-medium text-text-400 transition group-hover:text-accent-500 dark:text-text-200">
|
||||
<LinkIcon className="h-6 w-6 flex-none" />
|
||||
<span className="ml-2">{project.link.label}</span>
|
||||
</p>
|
||||
|
||||
@ -29,21 +29,21 @@ export function ArticleLayout({
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
aria-label="Go back to articles"
|
||||
className="group mb-8 flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0"
|
||||
className="group mb-8 flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-md shadow-text-800/5 ring-1 ring-text-900/5 transition dark:border dark:border-text-700/50 dark:bg-text-800 dark:ring-0 dark:ring-white/10 dark:hover:border-text-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0"
|
||||
>
|
||||
<ArrowLeftIcon className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400" />
|
||||
<ArrowLeftIcon className="h-4 w-4 stroke-text-500 transition group-hover:stroke-text-700 dark:stroke-text-500 dark:group-hover:stroke-text-400" />
|
||||
</button>
|
||||
)}
|
||||
<article>
|
||||
<header className="flex flex-col">
|
||||
<h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
<h1 className="mt-6 text-4xl font-bold tracking-tight text-text-800 dark:text-text-100 sm:text-5xl">
|
||||
{article.title}
|
||||
</h1>
|
||||
<time
|
||||
dateTime={article.date}
|
||||
className="order-first flex items-center text-base text-zinc-400 dark:text-zinc-500"
|
||||
className="order-first flex items-center text-base text-text-400 dark:text-text-500"
|
||||
>
|
||||
<span className="h-4 w-0.5 rounded-xl bg-zinc-200 dark:bg-zinc-500" />
|
||||
<span className="h-4 w-0.5 rounded-xl bg-text-200 dark:bg-text-500" />
|
||||
<span className="ml-3">{formatDate(article.date)}</span>
|
||||
</time>
|
||||
</header>
|
||||
|
||||
@ -3,17 +3,17 @@ import clsx from 'clsx'
|
||||
|
||||
const variantStyles = {
|
||||
primary:
|
||||
'bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70',
|
||||
'bg-text-800 font-semibold text-text-100 hover:bg-text-700 active:bg-text-800 active:text-text-100/70 dark:bg-text-700 dark:hover:bg-text-600 dark:active:bg-text-700 dark:active:text-text-100/70',
|
||||
secondary:
|
||||
'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70',
|
||||
'bg-text-50 font-medium text-text-900 hover:bg-text-100 active:bg-text-100 active:text-text-900/60 dark:bg-text-800/50 dark:text-text-300 dark:hover:bg-text-800 dark:hover:text-text-50 dark:active:bg-text-800/50 dark:active:text-text-50/70',
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
variant?: keyof typeof variantStyles
|
||||
} & (
|
||||
| (React.ComponentPropsWithoutRef<'button'> & { href?: undefined })
|
||||
| React.ComponentPropsWithoutRef<typeof Link>
|
||||
)
|
||||
| (React.ComponentPropsWithoutRef<'button'> & { href?: undefined })
|
||||
| React.ComponentPropsWithoutRef<typeof Link>
|
||||
)
|
||||
|
||||
export function Button({
|
||||
variant = 'primary',
|
||||
|
||||
@ -27,7 +27,7 @@ Card.Link = function CardLink({
|
||||
}: React.ComponentPropsWithoutRef<typeof Link>) {
|
||||
return (
|
||||
<>
|
||||
<div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
|
||||
<div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-text-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-text-800/50 sm:-inset-x-6 sm:rounded-2xl" />
|
||||
<Link {...props}>
|
||||
<span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
|
||||
<span className="relative z-10">{children}</span>
|
||||
@ -47,7 +47,7 @@ Card.Title = function CardTitle<T extends React.ElementType = 'h2'>({
|
||||
let Component = as ?? 'h2'
|
||||
|
||||
return (
|
||||
<Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
|
||||
<Component className="text-base font-semibold tracking-tight text-text-800 dark:text-text-100">
|
||||
{href ? <Card.Link href={href}>{children}</Card.Link> : children}
|
||||
</Component>
|
||||
)
|
||||
@ -59,7 +59,7 @@ Card.Description = function CardDescription({
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<p className="relative z-10 mt-2 text-sm text-text-600 dark:text-text-400">
|
||||
{children}
|
||||
</p>
|
||||
)
|
||||
@ -69,7 +69,7 @@ Card.Cta = function CardCta({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="relative z-10 mt-4 flex items-center text-sm font-medium text-teal-500"
|
||||
className="relative z-10 mt-4 flex items-center text-sm font-medium text-accent-500"
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
|
||||
@ -93,7 +93,7 @@ Card.Eyebrow = function CardEyebrow<T extends React.ElementType = 'p'>({
|
||||
<Component
|
||||
className={clsx(
|
||||
className,
|
||||
'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
|
||||
'relative z-10 order-first mb-3 flex items-center text-sm text-text-400 dark:text-text-500',
|
||||
decorate && 'pl-3.5',
|
||||
)}
|
||||
{...props}
|
||||
@ -103,7 +103,7 @@ Card.Eyebrow = function CardEyebrow<T extends React.ElementType = 'p'>({
|
||||
className="absolute inset-y-0 left-0 flex items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="h-4 w-0.5 rounded-xl bg-zinc-200 dark:bg-zinc-500" />
|
||||
<span className="h-4 w-0.5 rounded-xl bg-text-200 dark:bg-text-500" />
|
||||
</span>
|
||||
)}
|
||||
{children}
|
||||
|
||||
@ -15,7 +15,7 @@ function NavLink({
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="transition hover:text-teal-500 dark:hover:text-teal-400"
|
||||
className="transition hover:text-accent-500 dark:hover:text-accent-400"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
@ -26,17 +26,17 @@ export function Footer() {
|
||||
return (
|
||||
<footer className="mt-32 flex-none">
|
||||
<ContainerOuter>
|
||||
<div className="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
|
||||
<div className="border-t border-text-100 pb-16 pt-10 dark:border-text-700/40">
|
||||
<ContainerInner>
|
||||
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
|
||||
<div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">
|
||||
<div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-text-800 dark:text-text-200">
|
||||
{menu_items.map((item) => (
|
||||
<NavLink key={item.url} href={item.url}>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 dark:text-zinc-500">
|
||||
<p className="text-sm text-text-400 dark:text-text-500">
|
||||
© {new Date().getFullYear()} Jip J. Dekker. All rights
|
||||
reserved.
|
||||
</p>
|
||||
|
||||
@ -41,9 +41,9 @@ function MobileNavigation(
|
||||
) {
|
||||
return (
|
||||
<Popover {...props}>
|
||||
<Popover.Button className="group flex items-center rounded-xl bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
|
||||
<Popover.Button className="group flex items-center rounded-xl bg-white/90 px-4 py-2 text-sm font-medium text-text-800 shadow-lg shadow-text-800/5 ring-1 ring-text-900/5 backdrop-blur dark:bg-text-800/90 dark:text-text-200 dark:ring-white/10 dark:hover:ring-white/20">
|
||||
Menu
|
||||
<ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400" />
|
||||
<ChevronDownIcon className="ml-3 h-auto w-2 stroke-text-500 group-hover:stroke-text-700 dark:group-hover:stroke-text-400" />
|
||||
</Popover.Button>
|
||||
<Transition.Root>
|
||||
<Transition.Child
|
||||
@ -55,7 +55,7 @@ function MobileNavigation(
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm dark:bg-black/80" />
|
||||
<Popover.Overlay className="fixed inset-0 z-50 bg-text-800/40 backdrop-blur-sm dark:bg-black/80" />
|
||||
</Transition.Child>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
@ -68,18 +68,18 @@ function MobileNavigation(
|
||||
>
|
||||
<Popover.Panel
|
||||
focus
|
||||
className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800"
|
||||
className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-text-900/5 dark:bg-text-900 dark:ring-text-800"
|
||||
>
|
||||
<div className="flex flex-row-reverse items-center justify-between">
|
||||
<Popover.Button aria-label="Close menu" className="-m-1 p-1">
|
||||
<CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
|
||||
<CloseIcon className="h-6 w-6 text-text-500 dark:text-text-400" />
|
||||
</Popover.Button>
|
||||
<h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
|
||||
<h2 className="text-sm font-medium text-text-600 dark:text-text-400">
|
||||
Navigation
|
||||
</h2>
|
||||
</div>
|
||||
<nav className="mt-6">
|
||||
<ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
|
||||
<ul className="-my-2 divide-y divide-text-100 text-base text-text-800 dark:divide-text-100/5 dark:text-text-300">
|
||||
{menu_items.map((item) => (
|
||||
<MobileNavItem key={item.url} href={item.url}>
|
||||
{item.name}
|
||||
@ -110,13 +110,13 @@ function NavItem({
|
||||
className={clsx(
|
||||
'relative block px-3 py-2 transition',
|
||||
isActive
|
||||
? 'text-teal-500 dark:text-teal-400'
|
||||
: 'hover:text-teal-500 dark:hover:text-teal-400',
|
||||
? 'text-accent-500 dark:text-accent-400'
|
||||
: 'hover:text-accent-500 dark:hover:text-accent-400',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{isActive && (
|
||||
<span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-teal-500/0 via-teal-500/40 to-teal-500/0 dark:from-teal-400/0 dark:via-teal-400/40 dark:to-teal-400/0" />
|
||||
<span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-accent-500/0 via-accent-500/40 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0" />
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
@ -126,7 +126,7 @@ function NavItem({
|
||||
function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
|
||||
return (
|
||||
<nav {...props}>
|
||||
<ul className="flex rounded-xl bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
|
||||
<ul className="flex rounded-xl bg-white/90 px-3 text-sm font-medium text-text-800 shadow-lg shadow-text-800/5 ring-1 ring-text-900/5 backdrop-blur dark:bg-text-800/90 dark:text-text-200 dark:ring-white/10">
|
||||
{menu_items.map((item) => (
|
||||
<NavItem key={item.url} href={item.url}>
|
||||
{item.name}
|
||||
@ -151,7 +151,7 @@ function AvatarContainer({
|
||||
<div
|
||||
className={clsx(
|
||||
className,
|
||||
'h-10 w-10 rounded-xl bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10',
|
||||
'h-10 w-10 rounded-xl bg-white/90 p-0.5 shadow-lg shadow-text-800/5 ring-1 ring-text-900/5 backdrop-blur dark:bg-text-800/90 dark:ring-white/10',
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
@ -177,7 +177,7 @@ function Avatar({
|
||||
alt=""
|
||||
sizes={large ? '4rem' : '2.25rem'}
|
||||
className={clsx(
|
||||
'rounded-xl bg-zinc-100 object-cover dark:bg-zinc-800',
|
||||
'rounded-xl bg-text-100 object-cover dark:bg-text-800',
|
||||
large ? 'h-16 w-16' : 'h-9 w-9',
|
||||
)}
|
||||
priority
|
||||
|
||||
@ -6,7 +6,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
||||
<>
|
||||
<div className="fixed inset-0 flex justify-center sm:px-8">
|
||||
<div className="flex w-full max-w-7xl lg:px-8">
|
||||
<div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
|
||||
<div className="w-full bg-white ring-1 ring-text-100 dark:bg-text-900 dark:ring-text-300/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex w-full flex-col">
|
||||
|
||||
@ -37,11 +37,11 @@ export function BriefcaseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
>
|
||||
<path
|
||||
d="M2.75 9.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
|
||||
className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
|
||||
className="fill-text-100 stroke-text-400 dark:fill-text-100/10 dark:stroke-text-500"
|
||||
/>
|
||||
<path
|
||||
d="M3 14.25h6.249c.484 0 .952-.002 1.316.319l.777.682a.996.996 0 0 0 1.316 0l.777-.682c.364-.32.832-.319 1.316-.319H21M8.75 6.5V4.75a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2V6.5"
|
||||
className="stroke-zinc-400 dark:stroke-zinc-500"
|
||||
className="stroke-text-400 dark:stroke-text-500"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -142,11 +142,11 @@ export function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
>
|
||||
<path
|
||||
d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
|
||||
className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
|
||||
className="fill-text-100 stroke-text-400 dark:fill-text-100/10 dark:stroke-text-500"
|
||||
/>
|
||||
<path
|
||||
d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
|
||||
className="stroke-zinc-400 dark:stroke-zinc-500"
|
||||
className="stroke-text-400 dark:stroke-text-500"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -12,12 +12,12 @@ export function Section({
|
||||
return (
|
||||
<section
|
||||
aria-labelledby={id}
|
||||
className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40"
|
||||
className="md:border-l md:border-text-100 md:pl-6 md:dark:border-text-700/40"
|
||||
>
|
||||
<div className="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
|
||||
<h2
|
||||
id={id}
|
||||
className="text-sm font-semibold text-zinc-800 dark:text-zinc-100"
|
||||
className="text-sm font-semibold text-text-800 dark:text-text-100"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -12,10 +12,10 @@ export function SimpleLayout({
|
||||
return (
|
||||
<Container className="mt-16 sm:mt-32">
|
||||
<header className="max-w-2xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-text-800 dark:text-text-100 sm:text-5xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||
<p className="mt-6 text-base text-text-600 dark:text-text-400">
|
||||
{intro}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@ -28,27 +28,27 @@ export function ThemeSelector(
|
||||
<Listbox as="div" value={theme} onChange={setTheme} {...props}>
|
||||
<Listbox.Label className="sr-only">Theme</Listbox.Label>
|
||||
<Listbox.Button
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-zinc-700 dark:ring-inset dark:ring-white/5"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-text-700 dark:ring-inset dark:ring-white/5"
|
||||
aria-label="Theme"
|
||||
>
|
||||
<SunIcon
|
||||
className={clsx(
|
||||
'h-6 w-6 dark:hidden',
|
||||
theme === 'system'
|
||||
? 'fill-zinc-400 stroke-zinc-400'
|
||||
: 'fill-teal-400 stroke-teal-400',
|
||||
? 'fill-text-400 stroke-text-400'
|
||||
: 'fill-accent-400 stroke-accent-400',
|
||||
)}
|
||||
/>
|
||||
<MoonIcon
|
||||
className={clsx(
|
||||
'hidden h-6 w-6 dark:block',
|
||||
theme === 'system'
|
||||
? 'fill-zinc-400 stroke-zinc-400'
|
||||
: 'fill-teal-400 stroke-teal-400',
|
||||
? 'fill-text-400 stroke-text-400'
|
||||
: 'fill-accent-400 stroke-accent-400',
|
||||
)}
|
||||
/>
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/5">
|
||||
<Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-text-800 dark:ring-white/5">
|
||||
{themes.map((theme) => (
|
||||
<Listbox.Option
|
||||
key={theme.value}
|
||||
@ -57,23 +57,23 @@ export function ThemeSelector(
|
||||
clsx(
|
||||
'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
|
||||
{
|
||||
'text-teal-500': selected,
|
||||
'text-zinc-900 dark:text-white': active && !selected,
|
||||
'text-zinc-700 dark:text-zinc-400': !active && !selected,
|
||||
'bg-zinc-100 dark:bg-zinc-900/40': active,
|
||||
'text-accent-500': selected,
|
||||
'text-text-900 dark:text-white': active && !selected,
|
||||
'text-text-700 dark:text-text-400': !active && !selected,
|
||||
'bg-text-100 dark:bg-text-900/40': active,
|
||||
},
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<div className="rounded-md bg-white p-1 shadow ring-1 ring-zinc-900/5 dark:bg-zinc-700 dark:ring-inset dark:ring-white/5">
|
||||
<div className="rounded-md bg-white p-1 shadow ring-1 ring-text-900/5 dark:bg-text-700 dark:ring-inset dark:ring-white/5">
|
||||
<theme.icon
|
||||
className={clsx(
|
||||
'h-4 w-4',
|
||||
selected
|
||||
? 'fill-teal-400 stroke-teal-400'
|
||||
: 'fill-zinc-400 stroke-zinc-400',
|
||||
? 'fill-accent-400 stroke-accent-400'
|
||||
: 'fill-text-400 stroke-text-400',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import typographyPlugin from '@tailwindcss/typography'
|
||||
import colors from 'tailwindcss/colors'
|
||||
import { type Config } from 'tailwindcss'
|
||||
|
||||
import typographyStyles from './typography'
|
||||
@ -28,6 +29,10 @@ export default {
|
||||
fontFamily: {
|
||||
mono: ['var(--font-jetbrains-mono)'],
|
||||
},
|
||||
colors: {
|
||||
accent: colors.violet,
|
||||
text: colors.zinc,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Config
|
||||
|
||||
@ -27,45 +27,45 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
||||
},
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'--tw-prose-body': theme('colors.zinc.600'),
|
||||
'--tw-prose-headings': theme('colors.zinc.900'),
|
||||
'--tw-prose-links': theme('colors.teal.500'),
|
||||
'--tw-prose-links-hover': theme('colors.teal.600'),
|
||||
'--tw-prose-underline': theme('colors.teal.500 / 0.2'),
|
||||
'--tw-prose-underline-hover': theme('colors.teal.500'),
|
||||
'--tw-prose-bold': theme('colors.zinc.900'),
|
||||
'--tw-prose-counters': theme('colors.zinc.900'),
|
||||
'--tw-prose-bullets': theme('colors.zinc.900'),
|
||||
'--tw-prose-hr': theme('colors.zinc.100'),
|
||||
'--tw-prose-quote-borders': theme('colors.zinc.200'),
|
||||
'--tw-prose-captions': theme('colors.zinc.400'),
|
||||
'--tw-prose-code': theme('colors.zinc.700'),
|
||||
'--tw-prose-code-bg': theme('colors.zinc.300 / 0.2'),
|
||||
'--tw-prose-pre-code': theme('colors.zinc.100'),
|
||||
'--tw-prose-pre-bg': theme('colors.zinc.900'),
|
||||
'--tw-prose-body': theme('colors.text.600'),
|
||||
'--tw-prose-headings': theme('colors.text.900'),
|
||||
'--tw-prose-links': theme('colors.accent.500'),
|
||||
'--tw-prose-links-hover': theme('colors.accent.600'),
|
||||
'--tw-prose-underline': theme('colors.accent.500 / 0.2'),
|
||||
'--tw-prose-underline-hover': theme('colors.accent.500'),
|
||||
'--tw-prose-bold': theme('colors.text.900'),
|
||||
'--tw-prose-counters': theme('colors.text.900'),
|
||||
'--tw-prose-bullets': theme('colors.text.900'),
|
||||
'--tw-prose-hr': theme('colors.text.100'),
|
||||
'--tw-prose-quote-borders': theme('colors.text.200'),
|
||||
'--tw-prose-captions': theme('colors.text.400'),
|
||||
'--tw-prose-code': theme('colors.text.700'),
|
||||
'--tw-prose-code-bg': theme('colors.text.300 / 0.2'),
|
||||
'--tw-prose-pre-code': theme('colors.text.100'),
|
||||
'--tw-prose-pre-bg': theme('colors.text.900'),
|
||||
'--tw-prose-pre-border': 'transparent',
|
||||
'--tw-prose-th-borders': theme('colors.zinc.200'),
|
||||
'--tw-prose-td-borders': theme('colors.zinc.100'),
|
||||
'--tw-prose-th-borders': theme('colors.text.200'),
|
||||
'--tw-prose-td-borders': theme('colors.text.100'),
|
||||
|
||||
'--tw-prose-invert-body': theme('colors.zinc.400'),
|
||||
'--tw-prose-invert-headings': theme('colors.zinc.200'),
|
||||
'--tw-prose-invert-links': theme('colors.teal.400'),
|
||||
'--tw-prose-invert-links-hover': theme('colors.teal.400'),
|
||||
'--tw-prose-invert-underline': theme('colors.teal.400 / 0.3'),
|
||||
'--tw-prose-invert-underline-hover': theme('colors.teal.400'),
|
||||
'--tw-prose-invert-bold': theme('colors.zinc.200'),
|
||||
'--tw-prose-invert-counters': theme('colors.zinc.200'),
|
||||
'--tw-prose-invert-bullets': theme('colors.zinc.200'),
|
||||
'--tw-prose-invert-hr': theme('colors.zinc.700 / 0.4'),
|
||||
'--tw-prose-invert-quote-borders': theme('colors.zinc.500'),
|
||||
'--tw-prose-invert-captions': theme('colors.zinc.500'),
|
||||
'--tw-prose-invert-code': theme('colors.zinc.300'),
|
||||
'--tw-prose-invert-code-bg': theme('colors.zinc.200 / 0.05'),
|
||||
'--tw-prose-invert-pre-code': theme('colors.zinc.100'),
|
||||
'--tw-prose-invert-body': theme('colors.text.400'),
|
||||
'--tw-prose-invert-headings': theme('colors.text.200'),
|
||||
'--tw-prose-invert-links': theme('colors.accent.400'),
|
||||
'--tw-prose-invert-links-hover': theme('colors.accent.400'),
|
||||
'--tw-prose-invert-underline': theme('colors.accent.400 / 0.3'),
|
||||
'--tw-prose-invert-underline-hover': theme('colors.accent.400'),
|
||||
'--tw-prose-invert-bold': theme('colors.text.200'),
|
||||
'--tw-prose-invert-counters': theme('colors.text.200'),
|
||||
'--tw-prose-invert-bullets': theme('colors.text.200'),
|
||||
'--tw-prose-invert-hr': theme('colors.text.700 / 0.4'),
|
||||
'--tw-prose-invert-quote-borders': theme('colors.text.500'),
|
||||
'--tw-prose-invert-captions': theme('colors.text.500'),
|
||||
'--tw-prose-invert-code': theme('colors.text.300'),
|
||||
'--tw-prose-invert-code-bg': theme('colors.text.200 / 0.05'),
|
||||
'--tw-prose-invert-pre-code': theme('colors.text.100'),
|
||||
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 0.4)',
|
||||
'--tw-prose-invert-pre-border': theme('colors.zinc.200 / 0.1'),
|
||||
'--tw-prose-invert-th-borders': theme('colors.zinc.700'),
|
||||
'--tw-prose-invert-td-borders': theme('colors.zinc.800'),
|
||||
'--tw-prose-invert-pre-border': theme('colors.text.200 / 0.1'),
|
||||
'--tw-prose-invert-th-borders': theme('colors.text.700'),
|
||||
'--tw-prose-invert-td-borders': theme('colors.text.800'),
|
||||
|
||||
// Base
|
||||
color: 'var(--tw-prose-body)',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user